<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素类名操作
		  addClass()        有参：1个参和多个参
		                    语法：addClass("类名")
							<p class="类名">
							语法：addClass("类名")
							<p class="类名1 类名2"> 打空格
							功能：匹配元素集合中的所有元素
							     添加一个或者多个类名操作
							理解：元素添加存在的样式	 
		  removeClass()      功能：匹配元素集合中的所有元素
		                          移除一个或者多个类名操作
		  toggleClass()     功能：如果元素有类名移除，没有则添加
		  hasClass()        功能：检查匹配元素集合中是否包含指定类名
		                         返回值bool
		 -->
		 <!-- 要求：1.jq引入
		           2.html：   div  id="targetElement"
				             4个按钮  id="addClassBtn"
							        id="removeClassBtn"
									id="toggleClassBtn"
									id="hasClassBtn"
				             div   id="resultArea"
					3.css: .bgColor{  300*300 背景色随意}
							 .broders{ 10个像素实线红色边框  倒角画圆}
					-->
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: red;
			}
			.broders{
				border: 10px solid #ff0;
				border-radius: 50%;
			}
		</style>			
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击 添加类名 按钮 添加效果【样式】300*300 颜色红色
			$("#addClassBtn").click(function(){
				//div添加样式--存在样式：类名
			$("#targetElement").addClass("bgColor broders");
			$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//2.点击 添加类名按钮 添加效果【样式】
			// 300*300 背景色红色 圆 外层 10px 黄色框
			
			//3.点击 移除
		    $("#removeClassBtn").click(function(){
		    $("#targetElement").removeClass("broders");
		    $("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
		    });
			//3.点击 切换 换到第一图
			$("#toggleClassBtn").click(function(){
			$("#targetElement").toggleClass("broders");
			$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//4. 检查类名是否存在： true存在  false不存在
			$("#hasClassBtn").click(function(){
			var hc=$("#targetElement").hasClass("broders");
			$("#resultArea").text("检查当前样式"+hc);
			});
		</script>
	</body>
</html>